<template>
  <div class="inde_container">

    <!--   背景图遮住层  -->
    <div class="bgctwo" id="bgctwo" ></div>

      <div class="box">
        <div class="head">
          Blog System
        </div>
        <div class="middle">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="foot">
          <div class="foot_head">
            <i v-for="(item, index) in navgation" @click="triggerPage(item.path)" :key="index" :class="item.icon">
              {{item.name}}
            </i>
          </div>
          <div class="foot_footer">
            <i class="iconfont icon-weixin" > :15766308915</i>
            <i class="iconfont icon-qq" style="margin-left: 10px"> : 1274765607
<!--              <span style="margin-left: 5px">||</span> <i class="iconfont icon-qq"> 前端群</i>: 728032879-->
            </i>
          </div>
        </div>
      </div>



  </div>
</template>

<script>
export default {
  data () {
    return {
      navgation: [
        { name:'Login',icon:'iconfont icon-touxiang', path:'/login' },
        { name:'Article-List',icon:'iconfont icon-wenzhang', path:'/article' },
        { name:'Comment',icon:'iconfont icon-liuyan2', path:'/comment' },
        { name:'Amusement',icon:'iconfont icon--', path:'/amusement' },
        { name:'Photos',icon:'iconfont icon-xiangce', path:'/photos' },
        { name:'Github',icon:'iconfont icon-GitHub', path:'https://github.com/Acmenlei' },
      ],
      timer: '',
      colors: '',
      colorList: [
        'rgba(255,192,203,0.2)',
        'rgba(238,130,238,0.2)',
        'rgba(123,104,238,0.2)',
        'rgba(100,149,237,0.2)',
        'rgba(255,99,71,0.2)',
        'rgba(240,128,128,0.2)',
      ]
    }
  },
  async created() {

    var h = 0
    this.timer = await window.setInterval(() => {
      var bgctwo = document.getElementById('bgctwo')
      this.color = this.colorList[h]
      bgctwo.style.backgroundColor = this.color
      h++
      if (h >= this.colorList.length) {
        h = 0
      }
    },7000)
  },
  destroyed() {
    window.clearInterval(this.timer)
  },
  methods: {
    triggerPage(path) {
      if(path === 'https://github.com/Acmenlei') {
        window.open(path)
      } else {
        const tokenStr = window.sessionStorage.getItem('token')
        if (!tokenStr) {
          this.$router.push('/login')
          this.$message.warning({
            message: '登陆后才能正常操作哦！',
            center: true
          })
          return
        }
        this.$router.push(path)
      }
    }
  },
}
</script>

<style lang="less" scoped>
.inde_container{
  width:100%;
  height: 100%;
  position:relative;
  //text-align:center;
  //line-height:300px;
  color: #fff;
  .bgctwo{
    background-color: rgba(255,192,203,0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
  }
  .box{
    width: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    .head{
      color: #fff;
      margin: 0 auto;
      //width: 250px;
      text-align: center;
      font-size: 50px;
      //border: 1px solid #fff;
      padding: 5px;
      margin-bottom: 35px;
      border-radius: 10px;
    }
    .middle{
      display: flex;
      justify-content: center;
      margin: 0 20px;
      div{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin: 0 10px;
        &:nth-child(1){
          background-color: forestgreen;
        }
        &:nth-child(2){
          background-color: dodgerblue;
        }
        &:nth-child(3){
          background-color: yellow;
        }
        &:nth-child(4){
          background-color: red;
        }
      }
    }
    .foot{
      .foot_head{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 20px 0;
        i{
          margin: 10px 1.5%;
          cursor: pointer;
        }
      }
      .foot_footer{
        display: flex;
        justify-content: center;
        i{
          margin: 0px 5px;
        }
      }
    }
  }
}

.inde_container::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:transparent url('../assets/images/7.jpg')  no-repeat;
  background-size: 100% 100%;
  filter:blur(1px);
  z-index:-1;
}
</style>
